---
id: 613e275749ebd008e74bb62e
title: Schritt 8
challengeType: 0
dashedName: step-8
---

# --description--

Eine nützliche Eigenschaft einer _SVG_ (scalable vector graphics, skalierbare Vektorgrafiken) ist, dass dieses ein `path`-Attribut enthält, mit welchem ein Bild, ohne die Auflösung des Resultats zu beeinflussen, skaliert werden kann.

Derzeit übernimmt das `img` die Ursprungsgröße, welche aber zu groß ist. CSS verfügt über eine `max`-Funktion, die den größte Wert einer durch Kommata getrennten Menge von Werten zurückgibt. Zum Beispiel:

```css
img {
  width: max(250px, 25vw);
}
```

In the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the image will be 25vw. This is because 25vw is equal to 25% of the viewport width.

Skaliere das Bild, indem du seine `id` als Selektor verwendest und die `width` auf das Maximale von `100px` oder `18vw` setzt.

# --hints--

Du solltest den `#logo`-Selektor verwenden, um das `img`-Element auszuwählen.

```js
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
```

Du solltest dem `img` eine `width` mit dem Wert `max(100px, 18vw)` zuweisen.

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav></nav>
    </header>
    <main></main>
  </body>
</html>

```

```css
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

--fcc-editable-region--

--fcc-editable-region--

```
